<template>
  <div class="box-wrapper" v-loading.fullscreen.lock="loading" :style="{height:!list.length?'90%':''}">
    <div class="btns">
      <div class="create-btn" @click="router.push({name: 'customerInStoreCreate'})">创建入库单</div>
      <div class="create-btn" @click="router.push({name: 'customerOutStoreCreate'})">创建出库单</div>
    </div>
    <div class="box-card" v-if="list.length">
      <div class="item-box" v-for="item in list">
        <div class="oil-title">
          <div class="name">{{item.tankNo}}-<span :style="{color: item.goodsName.indexOf('汽油')>-1?'#4B7EFE':'#FA8C16'}">{{item.goodsName}}</span></div>
          <div class="capacity">最大罐容: {{item.maxCapacity}}m³</div>
        </div>
        <div class="oil">
          <template v-if="item.maxCapacity>item.myCapacity">
            <img class="oil-bg" src="https://web.czb365.com/ty/czb-mosi-wms-web/cylinder-bg1.png" alt="">
            <img class="oil-top" :style="{bottom: item.height + 30 + 'px',transition: 1+'s'}" src="https://web.czb365.com/ty/czb-mosi-wms-web/oil-top.png" alt="">
            <img class="oil-center" :style="{height: item.height+'px',transition: 1+'s'}" src="https://web.czb365.com/ty/czb-mosi-wms-web/oil-center.png" alt="">
            <img class="oil-bottom" src="https://web.czb365.com/ty/czb-mosi-wms-web/oil-bottom.png" alt="">
          </template>
          <img v-else class="oil-bg" src="https://web.czb365.com/ty/czb-mosi-wms-web/oil-full.png" alt="">
          <div class="curr-capacity">
            <div>{{item.myCapacity}}吨</div>
            <div>我的库存</div>
          </div>
        </div>
        <div class="wareHouse-Name">{{item.wareHouseName}}</div>
      </div>
    </div>
    <div class="empty-bg" v-else>
      <img src="https://web.czb365.com/ty/czb-mosi-wms-web/empty-bg.png" alt="">
      <span>暂无数据</span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { queryCustomerStorageInfo } from '@/api/customerStock'

export default defineComponent({
  setup () {
    const { proxy } = getCurrentInstance()
    const router = useRouter()
    let list = ref([])
    let loading = ref(false)
    const getList = async () => {
      loading.value = true
      const { code, result } = await queryCustomerStorageInfo()
      loading.value = false
      if (code !== 200) return
      result.forEach(item => {
        item.height = 0
      })
      list.value = result
      setTimeout(() => {
        result.forEach(item => {
          item.height = (item.myCapacity / item.maxCapacity) * 200
        })
        list.value = result
        proxy.$forceUpdate()
      }, 0)
    }
    getList()
    return { list, loading, router }
  }
})

</script>

<style scoped lang="less">
  .box-wrapper {
    width: 100%;
    background: #ffffff;
    border-radius: 11px;
    padding: 40px;
    box-sizing: border-box;
    .btns {
      position: absolute;
      top: 10px;
      right: 60px;
      display: flex;
      .create-btn {
        width: 126px;
        height: 44px;
        margin-left: 10px;
        background: #409EFF;
        border-radius: 8px;
        font-size: 18px;
        color: #ffffff;
        line-height: 44px;
        text-align: center;
        cursor: pointer;
        &:hover {
          background: #66b1ff;
        }
      }
    }
    .box-card {
      display: flex;
      flex-wrap: wrap;
      padding: 0;
      margin: 0;
      .item-box {
        margin-bottom: 100px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        width: 33.33%;
        min-width: 300px;
        .oil-title {
          .name {
            font-size: 20px;
            font-weight: bold;
            color: #333333;
            margin-bottom: 5px;
            text-align: center;
          }
          .capacity {
            text-align: center;
            font-size: 16px;
            color: #CF1322;
            margin-bottom: 5px;
          }
        }
        .oil {
          width: 182px;
          height: 281px;
          position: relative;
          overflow: hidden;
          margin: 0 auto;
          > img {
            position: absolute;
            width: 168px;
            left: 7px;
          }
          .oil-bg {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;
          }
          .oil-center {
            bottom: 30px;
          }
          .oil-bottom {
            bottom: 10px;
          }
          .curr-capacity {
            position: absolute;
            width: 100%;
            bottom: 100px;
            z-index: 10;
            > div {
              font-size: 20px;
              font-weight: bold;
              color: #333333;
              width: 100%;
              text-align: center;
              &:nth-last-child(1) {
                font-size: 16px;
              }
            }
          }
        }
        .wareHouse-Name {
          font-size: 24px;
          color: #333333;
          margin-top: 5px;
        }
      }
    }
    .empty-bg {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 200px;
      span {
        color: #666666;
      }
    }
  }


</style>
